<template>
  <div class="bg" style="height:auto;overflow:scroll">
    <!-- 用户栏   -->
    <el-card class="box-card" style="margin: 80px 220px 20px;height:auto">
      <b style="position: absolute;left: 250px;cursor:pointer;">消息</b>
      <b style="position: absolute;left: 700px;cursor:pointer;">系统消息</b>
      <b style="position: absolute;left: 1200px;cursor:pointer;" @click="handleEdit">一键清空</b>
      <p></p>
      <!--**********文章列表开始*********-->
      <el-row style="margin-top: 50px">
        <el-col v-for="a in tableData">
          <el-card style="margin-bottom: 10px;height: 120px">
            <el-row>
              <el-col :span="18" align="left" style="margin-top: -30px">
                <span style="font-size:20px;position: relative;top: 30px"><b>{{ a.title }}</b></span>
                <i class="el-icon-close" style="font-size:20px;position: absolute;left: 985px;top: 5px;cursor:pointer"
                   @click="deleteById(a.id)"/>
                <hr style="width: 1005px;position: relative;top: 30px"/>
              </el-col>
              <!-- 简述-->
              <el-col>
                <p style="position: relative;top: 20px">{{ a.content }}</p>
              </el-col>
            </el-row>
          </el-card>

        </el-col>

        <!--页码-->

      </el-row>

      <!--页码-->
      <template>
        <div>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 7, 10, 20]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="countDate">
          </el-pagination>
        </div>
      </template>
    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {},
      input: {
        status: 1,
      },

      tableData: [],  //用户数据

      currentPage: 1,   // 当前页码
      currentSize: 5,   // 每页展示信息数量
      countDate: 0,     // 条件查询结果集数量
    };
  },

  methods: {

    /**
     * 业务：根据条件查询用户列表
     */
    listMessageByCondition() {
      /**
       * 查询满足查询条件的信息数量
       */
      this.axios.get("http://localhost:9090/system/message/push/selectMessageByUserIdCountAll").then((response) => {
        this.countDate = response.data;

        let temp = response.data;
        if (response.data > 0) {
          let tempPageNum = temp % this.currentSize === 0 ? temp / this.currentSize : temp / this.currentSize + 1;
          if (this.currentPage > tempPageNum) {
            this.input.pageNum = 0;
            this.currentPage = 1;
          }
          this.input.pageNum = (this.currentPage - 1) * this.currentSize;
          this.input.pageSize = this.currentSize;

          /**
           * 查询满足查询条件的用户列表
           */
          this.axios.post("http://localhost:9090/system/message/push/selectMessageByUserId", this.input).then((response) => {
            this.tableData = response.data.list;
          })
        } else {
          this.tableData = ''
        }
      })
    },


    /**
     * 业务：删除消息
     */
    deleteById(id) {
      let data = {id: id}
      this.axios.post("http://localhost:9090/system/message/push/update/messageStatus", data).then((response) => {
        switch (response.data.code) {
          case 200:
            this.$message({
              type: 'success',
              message: "操作成功"
            });
            this.listMessageByCondition()
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },


    /**
     * 业务：清空消息
     */
    clearUserId() {
      this.axios.get("http://localhost:9090/system/message/push/update/messageStatus").then((response) => {
        switch (response.data.code) {
          case 200:
            this.$message({
              type: 'success',
              message: "操作成功"
            });
            this.listMessageByCondition()
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },

    handleEdit(row) {
      if (this.countDate === 0) {
        this.$message({
          type: 'info',
          message: "当前没有消息"
        });
      } else {
        this.$confirm('此操作将使【' + row.username + '】的账号无法正常使用, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.clearUserId();
        })
      }
    },


    /**
     * 业务：获取分页，每页条数
     * @param val
     */
    handleSizeChange(val) {
      console.log(`当前每页 ${val} 条`);
      this.currentSize = val;
      this.listMessageByCondition();
    },


    /**
     * 业务：获取当前页数
     * @param val
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.listMessageByCondition();
    },

  },
  created() {
    this.listMessageByCondition()
  }
}
</script>


<style scoped>
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('https://ts1.cn.mm.bing.net/th/id/R-C.51676491f69a1c1b3b043035c7565760?rik=ahRHaUMH3E02lg&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fb%2f2019%2f09-13%2f69781%2fbeijing_pic_69781_1200_600.jpg&ehk=F9XpXpcQR%2f3zuIkcEWrvMl8myfV4bm%2fwfw4lDwMbVy8%3d&risl=&pid=ImgRaw&r=0') no-repeat;
  background-size: 100% 100%;
  overflow: auto;
}

body {
  -moz-user-select: none;
}

#login {
  height: 320px;
  width: 350px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.25);
  background: #ffffff;
  opacity: 0.85;
  position: absolute;
  top: 20%;
  left: 40%;
  text-align: center;
  display: flex;
  flex-direction: column; /*横向*/
  padding: 30px;
  border-radius: 15px;
}

#login h2 {
  padding-bottom: 30px;
}

.btn {
  width: 80%;
  margin: auto;
}

.reg {
  float: right;
  height: 10px;
  line-height: 20px;
  position: relative;
  top: -10px;
}

a {
  color: #908f8f;
  text-decoration: none;
}

</style>

